<!--
 * @Author: 陈迪秀 1170776994@qq.com
 * @Date: 2024-02-27 11:26:12
 * @LastEditors: 陈迪秀 1170776994@qq.com
 * @LastEditTime: 2024-02-28 13:17:03
 * @FilePath: \stell-mall\src\components\access-services-dialog\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    v-bind="$attrs"
    class="as-dialog"
    :showClose="false"
    :close-on-click-modal="false"
    width="1050"
  >
    <div class="as-dialog-view">
      <div class="as-dialog__left">
        <div
          class="img-bg"
          :style="{ background: `url('${proxy.$imgUrl}contact-us-bg2.png')` }"
        >
          <h1>打造中国钢结构生态圈</h1>
        </div>
      </div>
      <div class="as-dialog__right">
        <hb-svg-icon
          name="clous"
          class="svg-clous"
          width="24"
          height="24"
          @click="resetForm(ruleFormRef)"
        ></hb-svg-icon>
        <h2>获取高效服务</h2>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          label-position="top"
          require-asterisk-position="right"
          :size="formSize"
          status-icon
        >
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入您的姓名" />
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input
              v-model="ruleForm.mobile"
              placeholder="请输入您的手机号"
            />
          </el-form-item>
          <el-form-item label="公司" prop="company">
            <el-input v-model="ruleForm.company" placeholder="请输入您的公司" />
          </el-form-item>
          <el-form-item label="需求" prop="demand">
            <el-input
              v-model="ruleForm.demand"
              type="textarea"
              rows="3"
              placeholder="请输入您的需求..."
            />
          </el-form-item>
          <el-form-item>
            <el-button
              class="submit-but"
              type="primary"
              @click="submitForm(ruleFormRef)"
            >
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, getCurrentInstance, defineEmits } from "vue";
import { checkPhone } from "@/utils/ruleMobile";
import type { FormInstance, FormRules } from "element-plus";
import { sendContactWorkOrder } from "@/api/home/index";
const emit = defineEmits(["close", "handleConfirm"]);
const { proxy } = getCurrentInstance();
interface RuleForm {
  name: string;
  mobile: string | number;
  company: string;
  demand: string;
}
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  name: "",
  mobile: "",
  company: "",
  demand: "",
});
const rules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  mobile: [
    { required: true, message: "手机号不能为空", trigger: "blur" },
    { min: 11, message: "请输入正确的手机号", trigger: "blur" },
    { validator: checkPhone, trigger: "blur" },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!", ruleForm);
      _sendContactWorkOrder();
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  emit("close");
};
const _sendContactWorkOrder = async () => {
  // emit("handleConfirm");
  try {
    const res = await sendContactWorkOrder({
      ...ruleForm,
      // tos: ["15042154@qq.com"],
    });
    if (res?.code === "200") {
      console.log("成功");
      emit("handleConfirm");
    }
  } catch (err) {
    console.log(err);
  }
};
</script>
<style lang="scss">
$width: 540px;
.as-dialog {
  padding: 0 !important;
  border-radius: 8px 8px 8px 8px;
  z-index: 9999;
  .el-dialog__header {
    height: 0;
    padding: 0 !important;
  }
  .as-dialog-view {
    height: 616px;
    width: 1050px;
    display: flex;
    .as-dialog__left {
      width: $width;
      box-sizing: border-box;
      /* padding-top: 90px; */
      background-image: linear-gradient(to bottom, #1678ff, #edfaff);
      border-radius: 8px 0 0 8px;
      text-align: center;
      position: relative;
      .img-bg {
        width: $width;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
      }
      h1 {
        position: absolute;
        top: 90px;
        height: 43px;
        width: $width;
        font-size: 30px;
        color: #ffffff;
        line-height: 35px;
        letter-spacing: 6px;
        text-align: center;
      }
    }
    .as-dialog__right {
      flex: 1;
      box-sizing: border-box;
      padding: 24px;
      border-radius: 0 8px 8px 0;
      display: flex;
      flex-direction: column;
      .svg-clous {
        height: 24px;
        align-self: flex-end;
      }
      h2 {
        height: 42px;
        font-size: 30px;
        color: #000000;
        line-height: 35px;
        letter-spacing: 6px;
        text-align: center;
        padding: 10px 0;
      }
      .demo-ruleForm {
        padding: 30px 24px 0 24px;
      }
      .submit-but {
        width: 100%;
        height: 40px;
        background-color: #1678ff;
      }
      .el-form-item--default {
        margin-bottom: 28px;
      }
    }
  }
}
</style>
